import React, { useState, useEffect } from 'react';
import { connect } from 'umi';
import moment from 'moment';
import { Button, Card, Col, Form, Row, DatePicker } from 'antd';
import QueryPage from '@/components/QueryPage';
import Locale from '@/utils/locale';
import Ryzs from '@/pages/Organization/Hr/zzjgComponents/Ryzs';
import Ygbmfb from '@/pages/Organization/Hr/zzjgComponents/Ygbmfb';
// import Ygjsfb from '@/pages/Organization/Hr/zzjgComponents/Ygjsfb';
import Slfb from '@/pages/Organization/Hr/zzjgComponents/Slfb';
import Gwfb from '@/pages/Organization/Hr/zzjgComponents/Gwfb';
import CompanyDepart from '@/components/CompanyDepart';
// import request from '@/utils/request';
// import { exists } from '@/utils/utils';
import { withRoutePage } from '@/utils/enhanceUtils';
import styles from './index.less';

const { locale } = new Locale('zzjgfx');
const { locale: pT } = new Locale('form.public');

const ZzjgFx = ({ zzjgfx, dispatch, form, route }) => {
    const { getFieldDecorator } = form;
    const [year, setYear] = useState(moment());
    const [isYearOpen, setIsYearOpen] = useState(false);
    // const { ryzs, ygbmfb, ygjsfb, slfb, gwfb } = zzjgfx;
    const { ryzs, ygbmfb, slfb, gwfb } = zzjgfx;
    const user = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {};
    const fetchList = () => {
        const { companyDepart: { companyId, departmentId } = {} } = form.getFieldsValue();
        dispatch({
            type: 'zzjgfx/fetchAllData',
            payload: {
                organizationCode: departmentId || companyId,
                orgFlag: departmentId ? '0' : '1'
            }
        });
    };
    const fetchRyzs = newYear => {
        const { companyDepart: { companyId, departmentId } = {} } = form.getFieldsValue();
        dispatch({
            type: 'zzjgfx/fetchRyzs',
            payload: {
                organizationCode: departmentId || companyId,
                // orgFlag: departmentId ? '0' : '1',
                year: newYear.format('YYYY')
            }
        });
    };
    const changeYear = date => {
        setYear(date);
        setIsYearOpen(false);
        fetchRyzs(date);
    };
    const handleSubmit = e => {
        e.preventDefault();
        form.validateFieldsAndScroll(err => {
            if (!err) {
                fetchRyzs(year);
                fetchList();
            }
        });
    };
    const init = async () => {
        fetchRyzs(year);
        fetchList();
    };

    useEffect(() => {
        init();
    }, []);

    // useEffect(() => {
    //     fetchRyzs();
    // }, [year]);
    return (
        <div className={styles.zzjgPage}>
            <QueryPage
                style={{ overflow: 'hidden' }}
                background="transparent"
                className={styles.queryPageSearch}
                searchBoxStyle={styles.searchBox}
                form={
                    <Row type="flex" justify="space-between">
                        <Col>
                            <h3>筛选条件</h3>
                        </Col>
                        <Col>
                            <Form layout="inline" onSubmit={handleSubmit} className={styles.form}>
                                <Form.Item label={pT('qxzgsbm')}>
                                    {getFieldDecorator('companyDepart', {
                                        rules: [
                                            {
                                                required: true,
                                                validator(_, value, callback) {
                                                    if (!value.companyId && !value.departmentId) {
                                                        callback(pT('qxzgsbm'));
                                                    } else {
                                                        callback();
                                                    }
                                                }
                                            }
                                        ],
                                        initialValue: {
                                            companyId: user.companyId
                                        }
                                    })(
                                        <CompanyDepart
                                            customDepartmentRequest={{
                                                url: '/api/oa/v1/department/getemployeeanalysetree'
                                            }}
                                            onlyLevelOne
                                            permissionCode={route.code}
                                        />
                                    )}
                                </Form.Item>
                                <Form.Item>
                                    <Button type="primary" htmlType="submit">
                                        {locale('form.search', false)}
                                    </Button>
                                </Form.Item>
                            </Form>
                        </Col>
                    </Row>
                }
                routeType="statOrgs"
            />
            <div className={styles.box}>
                <Card
                    bordered={false}
                    title={locale('ryzs')}
                    extra={
                        <Form layout="inline" style={{ whiteSpace: 'nowrap' }}>
                            <Form.Item label={locale('xznf')}>
                                <DatePicker
                                    open={isYearOpen}
                                    value={year}
                                    onPanelChange={changeYear}
                                    mode="year"
                                    format="YYYY"
                                    allowClear={false}
                                    onOpenChange={status => {
                                        setIsYearOpen(status);
                                    }}
                                />
                            </Form.Item>
                        </Form>
                    }
                >
                    <Ryzs newLocale={locale} data={ryzs} />
                </Card>
                <Row type="flex" gutter={12}>
                    <Col span={12}>
                        <Card bordered={false} title={locale('gsbmfb')}>
                            <Ygbmfb
                                data={ygbmfb}
                                // changeIndex={changeIndex}
                                // selectedIndex={bmfbIndex}
                            />
                        </Card>
                    </Col>
                    {/* <Col span={12}>
                        <Card bordered={false} title={locale('ygjsfb')}>
                            <Ygjsfb data={ygjsfb} />
                        </Card>
                    </Col> */}
                    <Col span={12}>
                        <Card bordered={false} title={locale('gwfb')}>
                            <Gwfb data={gwfb} />
                        </Card>
                    </Col>
                </Row>
                <Row type="flex" gutter={12}>
                    <Col span={24}>
                        <Card bordered={false} title={locale('slfb')}>
                            <Slfb data={slfb} />
                        </Card>
                    </Col>
                </Row>
            </div>
        </div>
    );
};

export default withRoutePage(connect(({ zzjgfx }) => ({ zzjgfx }))(Form.create()(ZzjgFx)));
